<template>
  <div class="cn_label d_a_c">
    <div class="d_a_c left_img" :style="{ width: imgWidth }">
      <img class="line" src="@/assets/img/z_line.png" alt="" />
      <img class="point m_l" src="@/assets/img/zlh.png" alt="" />
    </div>
    <div class="title" :style="{ fontSize: fontSize + 'px', width: textWidth }">
      {{ label }}
    </div>
    <div class="d_a_c left_img" :style="{ width: imgWidth }">
      <img class="point m_r" src="@/assets/img/ylh.png" alt="" />
      <img class="line" src="@/assets/img/y_line.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: "标题",
    },
    fontSize: {
      type: Number,
      default: 16,
    },
    imgWidth: {
      type: String,
      default: "33.3%",
    },
    textWidth: {
      type: String,
      default: "33.3%",
    },
  },
};
</script>

<style lang="scss" scoped>
.cn_label {
  justify-content: space-between;
  margin: 6px 0;
  .line {
    width: 80%;
    height: 4px;
  }
  .point {
    height: 10px;
    width: 10px;
  }
  .m_l {
    margin-left: 5px;
  }
  .m_r {
    margin-right: 5px;
  }
  .left_img,
  .right_img {
    width: 33.3%;
    height: auto;
  }
  .title {
    color: #fff;
    width: 33.3%;
    text-align: center;
  }
}
</style>